import * as echarts from "echarts";
const initOpts1 = (chartGSaleData, chartPSaleData) => {
  // 提取每个月的日期列表
  const allDatesSet = new Set([
    ...chartGSaleData.map((item) => item.date),
    ...chartPSaleData.map((item) => item.date),
  ]);
  const monthlyDates = [...allDatesSet].sort(
    (a, b) => new Date(a).getTime() - new Date(b).getTime()
  );
  // 初始化团体课和私教课的数据容器，确保每个日期都有对应的数据（默认值为0）
  const completeGroupClassData = {};
  const completePrivateClassData = {};
  monthlyDates.forEach((date) => {
    completeGroupClassData[date] =
      chartGSaleData.find((item) => item.date === date)?.value || 0;
    completePrivateClassData[date] =
      chartPSaleData.find((item) => item.date === date)?.value || 0;
  });

  const option = {
    title: {
      text: "月度约课视图",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20,
      },
      top: "1%",
      left: "10%",
    },
    backgroundColor: "#0f375f",

    grid: {
      left: "5%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
        },
      },
    },
    legend: {
      data: ["团体课", "私教课"],
      top: "15%",
      textStyle: {
        color: "#ffffff",
      },
    },
    xAxis: {
      data: monthlyDates,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#01FCE3",
        },
      },
      axisTick: {
        show: true, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac", //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "私教（节）",
        nameTextStyle: {
          color: "#ebf8ac",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac",
          },
        },
        // 添加以下配置项以控制刻度间隔
        interval: 10, // 设置刻度间隔为3的倍数，仅适用于非时间轴
        min: 0, // 根据实际情况设置最小值
      },
      {
        type: "value",
        name: "团课（节）",
        nameTextStyle: {
          color: "#ebf8ac",
        },
        position: "right",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac",
          },
        },
      },
      {
        type: "value",
        gridIndex: 0,
        min: 20,
        max: 100,
        splitNumber: 8,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
          },
        },
      },
    ],
    series: [
      {
        name: "团体课",
        type: "bar",
        barWidth: "15", // 柱条宽度
        data: monthlyDates.map((date) => completeGroupClassData[date]),
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(120, 235, 187, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(172, 244, 220, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "私教课",
        type: "bar",
        barWidth: "15", // 柱条宽度
        data: monthlyDates.map((date) => completePrivateClassData[date]),
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(133, 44, 233, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(183, 124, 247, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  return option;
};
const initEChart2 = (data1: any, data2: any) => {
  let chart = echarts.init(document.getElementById("myEcharts2"), "dark");
  const option = initOpts1(data1, data2);
  chart.setOption(option);
};
export default initEChart2;
